<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索栏 -->
      <div style="display: flex; justify-content: left" v-if="false">
        <el-input
          v-model="searchList.id"
          placeholder="请输入商户ID"
          style="width: 250px; margin-right: 20px"
          size="small"
          @keyup.enter.native="searchFn"
        />
        <!--搜索与重置-->
        <div>
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="searchFn"
            >搜索</el-button
          >
          <el-button
            class="filter-item"
            size="mini"
            type="warning"
            icon="el-icon-refresh-left"
            @click="resetFn"
            >重置</el-button
          >
        </div>
      </div>

      <!-- 新增---导出 -->
      <div style="margin-top: 10px">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="newFn"
        >
          新增
        </el-button>
      </div>
    </div>
    <!--Form编辑表单-->
    <el-dialog :visible.sync="isEdit" :title="FormTitle" width="500px">
      <el-form
        ref="form"
        :inline="false"
        :model="formList"
        :rules="formRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="登陆用户名" prop="login_name">
          <el-input
            v-model="formList.login_name"
            placeholder="请输入"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input
            v-model="formList.passwd"
            placeholder="请输入"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item label="用户类型" prop="user_type">
          <el-select
            placeholder="请选择"
            :clearable="true"
            v-model="formList.user_type"
            style="width: 320px"
          >
            <el-option
              v-for="item in stationArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false" type="text">取消</el-button>
        <el-button
          :loading="formLoading"
          type="primary"
          @click="editConfirmFn('form')"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      v-if="false"
      ref="table"
      :data="list"
      :header-cell-style="{ 'text-align': 'center', color: '#000' }"
      :cell-style="{ 'text-align': 'center' }"
      :highlight-current-row="true"
      :border="true"
      style="width: 100%"
      height="620"
    >
      <el-table-column :show-overflow-tooltip="true" prop="id" label="商户ID" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="merchant_name"
        label="商户名称"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="phone"
        label="电话"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="notify_url"
        label="电池回调地址"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="api_key"
        label="商户密钥"
      />
      <el-table-column label="操作" width="150px" align="center" v-if="false">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            style="color: #fff"
            @click="compileFn(scope.row)"
            >编辑</el-button
          >
          <el-popover :ref="scope.row.id" placement="top" width="200">
            <p>确定删除该条数据？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs[scope.row.id].doClose()"
                >取消</el-button
              >
              <el-button
                :loading="delLoading"
                type="primary"
                size="mini"
                @click="delMethod(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              type="danger "
              size="mini"
              style="color: #fff"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      v-if="false"
      :page-size.sync="page.size"
      :page-sizes="[5, 10, 20, 30, 50]"
      :total="page.total"
      :current-page.sync="page.page"
      style="margin-top: 8px"
      layout="total,sizes, prev, pager, next, jumper"
      @size-change="sizeChangeFn"
      @current-change="currentChangeFn"
    />
  </div>
</template>

<script>
import { urlObj } from "@/api/login";
export default {
  data() {
    return {
      searchList: {
        id: "",
      }, // 搜索数据
      isEdit: false, //控制编辑表单打开与否
      FormTitle: "", //编辑表单标题
      formLoading: false, //编辑确认状态--加载与否
      formList: {
        //编辑表单数据
        login_name: "",
        passwd: "",
        user_type: "",
      },
      formRules: {
        //编辑表单规则
        login_name: [{ required: true, message: "请输入", trigger: "blur" }],
        passwd: [{ required: true, message: "请输入", trigger: "blur" }],
        user_type: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      stationArr: [
        { label: "商户用户", value: "merchant" },
        { label: "站点用户", value: "station" },
      ],
      list: [], //列表数据
      delLoading: false, //删除状态--加载与否
      page: {
        size: 10, //每页的数量
        page: 1, //当前页
        total: 0, //总数
      }, //分页
    };
  },
  mounted() {
    // this.listFn();
  },
  methods: {
    // 分页---每页的数量
    sizeChangeFn(val) {
      console.log("每页的数量：", val);
    },
    // 当前页数
    currentChangeFn(val) {
      console.log("当前页数：", val);
    },
    // 重置
    resetFn() {
      console.log("重置");
      this.searchList.id = "";
      this.listFn();
    },
    // 搜索
    searchFn() {
      console.log("搜索", this.searchList.id);
      this.listFn(this.searchList.id);
    },
    // 新增
    newFn() {
      this.isEdit = true;
      this.FormTitle = "新增站点";
      this.formList.login_name = "";
      this.formList.passwd = "";
    },

    // 列表编辑按钮
    compileFn(row) {
      this.isEdit = true;
      this.FormTitle = "编辑站点";
      this.formList.id = row.id;
      this.formList.merchant_name = row.merchant_name;
      this.formList.phone = row.phone;
      this.formList.notify_url = row.notify_url;
    },

    // 列表编辑按钮 --确定
    editConfirmFn(val) {
      let prarms = {
        func: "addOperationUser",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: this.formList,
      };
      this.$refs[val].validate(async (valid) => {
        if (valid) {
          this.formLoading = true;
          urlObj(prarms)
            .then((res) => {
              // this.listFn();
              this.$message({
                message: res.msg || "",
                type: res.code == 0 ? "success" : "error",
              });
            })
            .catch((error) => {
              this.$message({
                message: res.msg || "",
                type: "error",
              });
            });
          this.formLoading = false;
          this.isEdit = false;
        }
      });
    },
    // 列表数据
    listFn(id) {
      let prarms = {
        func: "getMerchants",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: { id: id ? id : "" },
      };
      urlObj(prarms)
        .then((res) => {
          console.log(666, res);
          this.list = res.result;
          this.page.total = res.count || res.result.length;
        })
        .catch((error) => {});
    },
    // 删除按钮
    delMethod(id) {
      this.delLoading = true;
      let prarms = {
        func: "delStation",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: { id: id },
      };
      urlObj(prarms)
        .then((res) => {
          this.listFn();
          this.$message({
            message: res.msg || "",
            type: res.code == 0 ? "success" : "error",
          });
        })
        .catch((error) => {
          this.$message({
            message: res.msg || "",
            type: "error",
          });
        });
      this.delLoading = false;
      this.$refs[id].doClose();
    },
  },
};
</script>

<style lang="scss" scoped></style>
